<template>
  <view class="content">
    <view class="top-info">
      <image class="deliver" src="/static/images/deliver.png" mode="widthFix" />
      <view>
        <view>顺丰</view>
        <view class="deliver-number" @click="handleCopy">
          <view>{{ deliver.deliver_number || '' }}</view>
          <image
            style="width: 24rpx; height: 24rpx"
            src="/static/images/copy.png"
            mode="widthFix"
          />
        </view>
      </view>
    </view>
    <view class="list">
      <view
        class="item"
        :class="{ last: index == 0 }"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="line"></view>
        <view class="time">
          <view class="status">{{ item.logisticsStatus }}</view>
          <view class="date">{{ item.date_time }}</view>
        </view>
        <view class="info">
          <text>[{{ item.areaName }}] {{ item.desc }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    deliver: {
      type: Object,
      default: () => ({}),
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {}
  },

  onLoad() {},

  methods: {
    handleCopy() {
      uni.setClipboardData({
        data: this.deliver.deliver_number,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  .top-info {
    display: flex;
    align-items: center;
    height: 146rpx;
    background: #f5f5f5;
    border-radius: 2rpx;
    margin-bottom: 30rpx;
    padding-left: 54rpx;
    box-sizing: border-box;
    .deliver {
      width: 65rpx;
      height: 56rpx;
      margin-right: 20rpx;
    }
    .deliver-number {
      display: flex;
      align-items: center;
      justify-content: center;
      image {
        margin-left: 20rpx;
      }
    }
  }
  .list {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 54rpx;
    box-sizing: border-box;
    .item {
      font-size: 23rpx;
      color: #545454;
      padding-left: 30rpx;
      padding-bottom: 60rpx;
      position: relative;
      box-sizing: border-box;
      .line {
        position: absolute;
        left: 0;
        top: 10rpx;
        border-left: 2rpx dashed #545454;
        height: 100%;
      }
      .time {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
      }
      .status {
        font-size: 29rpx;
        font-weight: bold;
        margin-right: 12rpx;
      }
    }
    .item:last-child {
      .line {
        border: none;
      }
    }
    // 圆圈样式
    .item::before {
      content: '';
      position: absolute;
      left: -11rpx;
      top: 8rpx;
      bottom: 0;
      z-index: 10;
      width: 22rpx;
      height: 22rpx;
      border-radius: 50%;
      background-color: #000;
    }
    .last {
      color: #000;
    }
    // 第一个圆圈样式
    .last::before {
      width: 26rpx;
      height: 26rpx;
      top: 8rpx;
    }
  }
}
</style>
